<template>
    <div class="ucenter">
        <div class="topWrap bgCover">
            <div>个人中心</div>
            <p>{{userInfo.nickName}}</p>
            <div class="avatar">
                <img v-lazy="userInfo.avatar" alt="">
            </div>
        </div>
        <div class="user-info">
            
            <ul class='info-list'>
                <li>
                    <p>
                        <span class="themeColor">{{userInfo.service_integral||0}}</span>
                    </p>
                    <p>我的积分</p>
                </li>
                <li>
                    <p>
                        <span class="themeColor">{{userInfo.service_times||0}}</span>次
                    </p>
                    <p>服务次数</p>
                </li>
                <li>
                    <p>
                        <span class="themeColor">{{userInfo.join_team||0}}</span>个
                    </p>
                    <p>参与团队</p>
                </li>
                <li>
                    <p>
                        <span class="themeColor">{{userInfo.service_star||'无星级'}}</span>
                    </p>
                    <p>我的星级</p>
                </li>
            </ul>
        </div>
        <div class="userManage">
            <p class="title">
                <img src="../../../static/img/ucenter/icon_gr@2x.png" alt="">
                个人管理
            </p>
            <ul class="manage-list flex">
                <li v-for="(el,index) in personalManage" :key="index" @click="goto(el.url)">
                    <p><img :src="el.icon" alt=""></p>
                    <p>{{el.text}}</p>
                </li>
            </ul>
        </div>
        <div class="userManage">
            <p class="title">
                <img src="../../../static/img/ucenter/icon_td@2x.png" alt="">
                团队管理
            </p>
            <ul class="manage-list flex">
                <li v-for="(el,index) in teamManage" @click='goto(el.url)' :key="index">
                    <p><img :src="el.icon" alt=""></p>
                    <p>{{el.text}}</p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import {Dialog} from 'vant'
    import  {removeLocVal} from '@/utils/utils'
export default {
    data() {
        return {
            personalManage:[
                {icon:require('../../../static/img/ucenter/zl@2x.png'),text:'我的资料', url: '/myInfo'},
                {icon:require('../../../static/img/ucenter/pm@2x.png'),text:'我的排名', url: '/mySort'},
                {icon:require('../../../static/img/ucenter/hd@2x.png'),text:'参与的活动', url: '/myJoinActivity'},
                {icon:require('../../../static/img/ucenter/td@2x.png'),text:'已入的团队', url: '/myTeam'},
                {icon:require('../../../static/img/ucenter/pj@2x.png'),text:'服务评价', url: '/myRecordComment'},
                {icon:require('../../../static/img/ucenter/jy@2x.png'),text:'我要提建议', url: '/feedback'},
                {icon:require('../../../static/img/ucenter/xgmm@2x.png'),text:'修改密码', url: '/updatePassword'},
                {icon:require('../../../static/img/ucenter/tcdl@2x.png'),text:'退出登录', url: '/login'},
            ],
            teamManage:[
                {icon:require('../../../static/img/ucenter/dqhd@2x.png'),text:'发起活动',url:'/initiateActivity'},
                {icon:require('../../../static/img/ucenter/syfw@2x.png'),text:'认领任务', url: '/myRecord'},
                {icon:require('../../../static/img/ucenter/tdhd@2x.png'),text:'团队活动', url: '/myTeamActivity'},
                {icon:require('../../../static/img/ucenter/zl@2x(1).png'),text:'团队资料', url: '/myOwnTeam'},
                {icon:require('../../../static/img/ucenter/cy@2x.png'),text:'团队成员', url: '/myTeamMember'},
                {icon:require('../../../static/img/ucenter/zh@2x.png'),text:'转换管理权', url: '/myTeamConversion'},
            ],
            userInfo:{}
        }
    },
    methods: {
        goto(url){
            if(url){
                if(url === '/login'){
                    removeLocVal('token');
                }
                this.$router.push(url);
            }else{
                Dialog.alert({
                    title: '提示',
                    message: '开发中...'
                })
            }
        }
    },
    async created(){
        let res=await this.$http({
            method:'api.mine.index'
        })
        this.userInfo=res.data
    }
}
</script>

<style lang='scss' scoped>
.topWrap{height: 3.1rem;width: 100%;position: relative;
    background-image: url('../../../static/img/ucenter/bg@2x.png');
    text-align: center;color: #fff;font-size: .36rem;padding-top:.66rem;box-sizing: border-box;
    p{font-size: .3rem;margin-top: .55rem;}
    .avatar{width: 1.52rem;height: 1.52rem;position: absolute;bottom: -0.76rem;left: 50%;transform: translateX(-50%);
    border-radius: 50%;border:3px solid rgba(255, 255, 255, 1);box-shadow:0px 8px 10px 0px rgba(232,75,69,0.7);
    background:rgba(255,238,237,1);
    img{width: 100%;height: 100%;border-radius: inherit;}
    }
}
.user-info{padding-top: 1.21rem;box-sizing: content-box;background: #fff;
box-shadow:0px 2px 9px 1px rgba(222,71,66,0.2);
}
.info-list{
    display: flex;
    text-align: center;
    font-size: 14px;
    padding-bottom: .5rem;
    color: #333333;
    font-size: 14px;
    
    li{width: 25%;border-right:solid 1px #D1D1D1;
        p:first-of-type{
            margin-bottom: .2rem;
            color:#888888;
        }
        .themeColor{font-size: 16px;}
        &:last-of-type{
            border-right: none;
        }
    }
}
.user-info{background: #fff;}
.userManage{
    background: #fff;margin: .33rem 0;
    .title{
        padding: .25rem 0;margin-bottom: .2rem;
    font-weight: bold;font-size:.31rem;padding-left:.7rem;
    img{width: .28rem;height: .28rem;margin-right: .15rem;}
    }
.manage-list{
    flex-wrap: wrap;
    li{
        width: 33.3333%;text-align:center;margin-bottom:.4rem;
        img{width: .66rem;height: .66rem;;}
        p:last-of-type{margin-top: .22rem;color: #686868;}
    }
}
}
.ucenter{padding-bottom: 50px;}
</style>